@use 'sass:color';

@mixin make-dark-theme($name, $darkModePrimary) {
  .config-ui-x-#{$name} {
    $backgroundColor: #000000;
    $secondaryBackground: #2b2b2b;
    $secondaryText: #9e9e9e;

    $modalBackground: #242424;

    background-color: $backgroundColor;

    a.btn {
      color: #ffffff !important;
    }

    pre {
      background-color: #2b2b2b;
      color: #cdcdcd;
      text-align: left;
      padding: 15px !important;
      border-radius: 10px;
    }

    .sidebar {
      background: #111111;
      color: #6d6e7e;

      .header {
        background: #111111;
      }

      .link-wrapper {
        scrollbar-color: $darkModePrimary transparent;

        .link {
          .link-row {
            &:hover {
              background: #000000;

              .title {
                color: white;
              }
            }

            &.active {
              i {
                color: $darkModePrimary;
              }
            }

            .title {
              color: #6d6e7e;
              font-weight: 300;
            }
          }
        }
      }
    }

    .m-header {
      background: #111111;
    }

    .custom-select {
      background: #333333;
      color: #eeeeee !important;
      border: 1px solid #333333 !important;
    }

    .setup2fa .form-control,
    .custom-input {
      background-color: #333333 !important;
      border: none !important;
      color: #eeeeee !important;
    }

    .form-control::placeholder {
      color: #636363 !important;
      opacity: 1 !important;
    }

    .hb-plain-text-editor {
      background-color: #333333 !important;
      color: #eeeeee !important;
    }

    .search-bar {
      border: 0 !important;
      background-color: #111111 !important;
    }

    .dropdown-menu {
      background-color: #222222;
    }

    .dropdown-divider {
      border-top: 1px solid #444444;
    }

    .navbar .dropdown-menu a:not(.active) {
      color: #eeeeee;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
      background-color: #444444;
    }

    .dropdown-item,
    .dropdown-item:hover {
      color: #eeeeee;
    }

    .primary-text {
      color: $darkModePrimary;
    }

    .hb-uix-switch input:checked ~ .hb-uix-slider {
      background-color: $darkModePrimary;
    }

    .rendux-label {
      background: #898989 !important;
      border-color: #898989 !important;
    }

    .rendux-input:checked + label {
      // For the grey theme, the on colour is too close to the off colour,
      // so as an exception, use a slightly greener colour
      @if $name == 'dark-mode-grey' {
        background: #6b7d5a !important;
        border-color: #6b7d5a !important;
      } @else {
        background: $darkModePrimary !important;
        border-color: $darkModePrimary !important;
      }
    }

    .btn-primary,
    .btn-default {
      background-color: $darkModePrimary !important;
      border-color: $darkModePrimary !important;

      &:hover,
      &:focus {
        background-color: color.adjust($darkModePrimary, $lightness: -5%) !important;
        border-color: color.adjust($darkModePrimary, $lightness: -5%) !important;
        transition: background-color 0.25s;
      }
    }

    .btn-control {
      color: #ffffff;
      background-color: #333333;
      border-color: color.adjust(#333333, $lightness: -2%) !important;

      &:hover,
      &:focus {
        color: #ffffff;
        background-color: color.adjust(#333333, $lightness: -2%) !important;
        border-color: color.adjust(#333333, $lightness: -2%) !important;
        transition: background-color 0.25s;
      }
    }

    .btn-read {
      color: #ffffff;
      background-color: #333333;
      border-color: color.adjust(#333333, $lightness: -2%) !important;
    }

    .btn-link {
      color: #9e9e9e !important;
    }

    .badge-primary {
      background-color: #2b2b2b !important;
    }

    .card {
      color: #ffffff;
      background-color: $secondaryBackground !important;
    }

    .login-card,
    .setup-card {
      background-color: rgba($secondaryBackground, 0.97) !important;
    }

    .alert {
      color: #eeeeee;
      background-color: #2b2b2b;
      box-shadow: 0 0 1px #444444;
      border: none;

      a {
        color: $darkModePrimary;
      }
    }

    .alert-info {
      box-shadow: 0 0 1px $darkModePrimary;
    }

    .alert-warning {
      box-shadow: 0 0 1px #ffa000;
    }

    .alert-error {
      box-shadow: 0 0 1px #d32f2f;
    }

    .qr-code-container {
      background-color: $secondaryBackground;

      svg {
        fill: $darkModePrimary;
      }
    }

    .qr-code-theme-color {
      stroke: $darkModePrimary !important;
    }

    a {
      color: $darkModePrimary;

      &.card-link {
        color: #9e9e9e;

        @media (hover: hover) {
          &:hover {
            color: $darkModePrimary !important;
          }
        }
      }

      @media (hover: hover) {
        &:hover {
          text-decoration: underline;
        }
      }
    }

    .icon-button {
      cursor: pointer;

      @media (hover: hover) {
        &:hover {
          color: $darkModePrimary !important;
        }
      }
    }

    hr {
      border-color: $darkModePrimary;
      background-color: $darkModePrimary;
      color: $darkModePrimary;
    }

    .btn-close {
      --bs-btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dddddd'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
    }

    .modal-header {
      background-color: $modalBackground;
      border-bottom: 0;
    }

    .modal-title {
      color: $darkModePrimary;
    }

    .modal-body {
      background-color: $modalBackground;
      color: #ffffff;

      input,
      select,
      .custom-input {
        border-color: #242424 !important; //$backgroundColor;
        background-color: #242424 !important;
        color: #ffffff;

        &::placeholder {
          color: #bdbdbd;
        }
      }

      input[readonly] {
        color: #717171;
        cursor: not-allowed;
      }

      .list-group-item {
        background-color: $secondaryBackground;
      }
    }

    .modal-footer {
      background-color: $modalBackground;
      border-top: 0;
    }

    .modal-backdrop {
      opacity: 0.8;
    }

    .table {
      color: #ffffff;
    }

    .table-hover tbody tr:hover {
      @media (hover: hover) {
        color: $darkModePrimary !important;
      }
    }

    .table-striped tbody tr:nth-of-type(odd) {
      background-color: rgba(35, 35, 35, 0.43);
    }

    markdown {
      color: #ffffff; // $secondaryText !important;
    }

    .md-form {
      input {
        color: #ffffff;
      }

      .form-control {
        &:disabled {
          color: #ffffff;
        }
      }

      .grey-text {
        color: $darkModePrimary !important;
      }
    }

    .search-bar {
      color: #999999 !important;
      border-color: #242424 !important;

      @media (hover: hover) {
        &:hover {
          border: 1px solid #242424 !important;
        }
      }

      &:focus {
        border: 1px solid #242424 !important;
        box-shadow: inherit !important;
        color: $darkModePrimary !important;
      }
    }

    .list-group-item {
      background-color: $secondaryBackground;
      color: #ffffff;

      .badge-primary {
        background-color: $darkModePrimary !important;
      }
    }

    .accessory-box {
      background-color: $secondaryBackground;
      color: $secondaryText;
    }

    .rectangle {
      fill: #454545 !important;
    }

    /** Gridster **/
    gridster-item {
      color: #ffffff;
      background-color: #2b2b2b;
    }

    gridster-preview {
      background: rgba(224, 224, 224, 0.5);
    }

    #AccessoriesWidgetComponent {
      border-color: rgba($secondaryBackground, 0.5) !important;
    }

    .hb-widget-chart-background {
      background-color: rgba($darkModePrimary, 0.2);
      display: none;
    }

    .animate_loader {
      .spinner_outer {
        stroke: $darkModePrimary;
      }

      .spinner_inner {
        stroke: #fff;
      }
    }

    .login-container {
      background-color: #000000 !important;
    }

    .plugin-icon-card {
      width: 70px;
      height: 70px;
      border-radius: 15px;
      border: 1px solid #222222;
    }

    @media (max-width: 991px) {
      .plugin-icon-card {
        width: 60px;
        height: 60px;
      }
    }

    .plugin-modal-body {
      .tab-content {
        background: #2b2b2b;
        margin-top: 0 !important;
      }
      .nav-tabs .nav-link.active {
        background-color: #2b2b2b;
      }
    }

    .ng-bs5-validate {
      .nav-tabs {
        border-color: #242424;
        --bs-nav-tabs-link-hover-border-color: #242424;

        li a {
          color: #ffffff;
        }

        li .active {
          background: #242424;
          color: #ffffff;
          border-color: #242424;
        }
      }
    }

    .gradient {
      background: linear-gradient(130deg, $darkModePrimary, #4a266c, #2b2b2b);
    }
  }
}

@include make-dark-theme('dark-mode-orange', #ffa000);
@include make-dark-theme('dark-mode-red', #d32f2f);
@include make-dark-theme('dark-mode-pink', #c2185b);
@include make-dark-theme('dark-mode-purple', #9c27b0);
@include make-dark-theme('dark-mode-deep-purple', #673ab7);
@include make-dark-theme('dark-mode-indigo', #3f51b5);
@include make-dark-theme('dark-mode-blue', #2196f3);
@include make-dark-theme('dark-mode-blue-grey', #607d8b);
@include make-dark-theme('dark-mode-cyan', #00838f);
@include make-dark-theme('dark-mode-green', #388e3c);
@include make-dark-theme('dark-mode-teal', #009688);
@include make-dark-theme('dark-mode-grey', #9e9e9e);
@include make-dark-theme('dark-mode-brown', #795548);
